<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Canvas Tetris</title>
		<script type="text/javascript" src="../../build/dist.js"></script>
		<!--[if IE]><script src="../../excanvas/excanvas.js"></script><![endif]-->
		<script type="text/javascript" src="tetris.js"></script>
		<script type="text/javascript" src="elements.js"></script>
		<style type="text/css">
label {
	width: 100px;
	display: block;
	float: left;
	clear: left;
}
input {
	display: block;
	float: left;
}
input#submit {
	clear: left;
	margin-left: 210px;
}
		</style>
	</head>
	<body>
		<p>Use A, S, D to move the element. Rotate the element with m or n.</p>
		<form onsubmit="startGame();return false;">
			<label for="tb_rows">Rows</label>
			<input id="tb_rows" type="text" value="12" />
			
			<label for="tb_cols">Columns</label>
			<input id="tb_cols" type="text" value="8" />
			
			<label for="tb_speed">Speed</label>
			<input id="tb_speed" type="text" value="20" />
			
			<label for="tb_size">Box size</label>
			<input id="tb_size" type="text" value="20" />
			
			<label for="tb_colors">Colors</label>
			<input id="tb_colors" type="text" value="red; blue; green" />
			
			<input id="submit" type="submit" value="start" />
		</form>
		<script type="text/javascript">//<![CDATA[
var game;
function startGame() {
	var configs={
		rows: parseInt(document.getElementById('tb_rows').value) || 12,
		cols: parseInt(document.getElementById('tb_cols').value) || 8,
		speed: parseInt(document.getElementById('tb_speed').value) || 20,
		size: parseInt(document.getElementById('tb_size').value) || 20,
		colors: document.getElementById('tb_colors').value.replace(/\s/g, '').split(';')
	};
	
	var form=document.getElementsByTagName('form')[0];
	form.parentNode.removeChild(form);
	
	var canvas=document.createElement('canvas');
	canvas.width=configs.size*configs.cols;
	canvas.height=configs.size*configs.rows;
	document.getElementsByTagName('body')[0].appendChild(canvas);
	
	game=new Tetris(canvas, configs);
	game.run();
}
//		]]></script>
	</body>
</html>